<template>
  <div v-if="detailData">
    <div class="select-related-container">
      <!-- projectStatus: 0:待提交 1:待初审 2:待复审 3:待确认 4:待封存 5:已封存 -->
      <InvoiceAndContract
        ref="ContractSelect"
        :is-edit="Number(detailData.projectStatus) < 5"
        :title="'合同信息'"
        :sub-title="'关联合同'"
        :type="1"
        :is-disabled="false"
        :show-mobile-page="showMobilePage"
        :show-empty="true"
        style="margin-top: 10px;"
        placeholder="请输入合同编号/合同名称"
        @changeSelect="changeSelect" />
        <!-- :init-request-data="hasRouteAuth('crm:contract:read')" -->
    </div>
    <div style="padding-bottom: 0;">
      <InvoiceTable :table-data="detailData.invoiceInfo || []"/>
    </div>
    <!-- <div style="height:30px;display:flex;align-items:center;">
        <div><Title title="发票信息" /></div>
        <IconAmountLayout :amount="detailData.invoiceAmount/100" amount-text="有效发票金额" />
      </div>
      <InvoiceAndContract
        ref="InvoiceSelect"
        :show-empty="true"
        :type="2"
        :related-contract-style="{
          position: 'absolute',top: '0px',right: '0px'
        }"
        :is-disabled="false"
        :is-edit="Number(detailData.projectStatus) < 5"
        style="margin-bottom: 32px"
        target-keyword="no"
        placeholder="请输入发票编号/发票号码"
        @changeSelect="changeSelect" />
      :init-request-data="hasRouteAuth('crm:receipt:read')"
    </div> -->
  </div>
</template>

<script>
import InvoiceAndContract from '@/components/CreateOrder/InvoiceAndContract';
import { setProjectDetail } from '@/api/projectDetail.js';
import { hasRouteAuth } from '@/utils/permission';
import ElMessage from '@/utils/message';
import { moneyFilter } from '@/filters/number';
import IconAmountLayout from '@/components/Common/IconAmountLayout';
import InvoiceTable from '@/components/Finance/invoiceTable';
import { mapState } from 'vuex';
import Title from '@/components/Title';
export default {
  components: { InvoiceAndContract, Title, IconAmountLayout, InvoiceTable },
  filters: { moneyFilter },
  props: {
    detailData: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      invoiceInfo: null
    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    })
  },
  created() {
    if (this.detailData.contract || this.detailData.invoiceInfo) {
      this.setDefault(this.detailData);
    } else {
      this.$emit('getDetail', true);
    }
  },
  methods: {
    hasRouteAuth,
    // 合同和发票修改
    changeSelect(selectData) {
      const params = this.getRelatedIds();
      params.id = this.$route.params.id || '';
      setProjectDetail(params).then(res => {
        if (res.code === 200) {
          this.$emit('getDetail');
        } else {
          ElMessage.error(res.message);
        }
      }).catch(() => {
        this.$emit('getDetail', true);
      });
    },
    setDefault(data) {
      this.$nextTick(() => {
        this.invoiceInfo = data.invoiceInfo;
        if (this.$refs.ContractSelect) this.$refs.ContractSelect.setDefault(data.contract);
        if (this.$refs.InvoiceSelect) this.$refs.InvoiceSelect.setDefault(data.invoiceInfo);
      });
    },
    // 获取合同和发票
    getRelatedIds() {
      const contractSelect = this.$refs.ContractSelect;
      const invoiceSelect = this.$refs.InvoiceSelect;
      let contractIds = [];
      let invoiceIds = [];
      if (contractSelect && contractSelect.selectData) {
        contractIds = contractSelect.selectData.map(i => i.id);
      }
      if (invoiceSelect && invoiceSelect.selectData) {
        invoiceIds = invoiceSelect.selectData.map(i => i.id);
      }
      return {
        contractIds: contractIds.join(','),
        invoiceIds: invoiceIds.join(',')
      };
    }
  }
};
</script>

<style lang="scss" scoped>
.select-related-container {
  padding-bottom: 16px;
  position: relative;
  &::v-deep {
    .el-input__inner  {
      width: 240px;
      line-height: 16px;
    }
  }
}
</style>
